<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <div class="mode_item">
            <a-form-model-item label="流程名称">
              <a-input v-model="form.name" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="业务类型">
              <j-search-select-tag placeholder="请选择" v-model="form.type" :dictOptions="typeOptions" />
            </a-form-model-item>
            <a-form-model-item label="生效范围">
              <j-select-depart v-model="form.rangeId" :trigger-change="true" :multi="true" @rows="getSelectRows" />
            </a-form-model-item>
            <a-form-model-item label="流程状态">
              <j-search-select-tag placeholder="请选择" v-model="form.status" :dictOptions="statusOptions" />
            </a-form-model-item>
          </div>
          <div class="mode_item">
            <a-form-model-item label="创建日期">
              <a-range-picker
                :allowClear="true"
                v-model="rangePickerTime"
                valueFormat="YYYY-MM-DD"
                format="YYYY-MM-DD"
                @change="rangePickerChange"
                style="width: 100%;"
              />
            </a-form-model-item>
          </div>
          <div style="margin-top: 20px">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询 </a-button>
              <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <div>
          <a-button type="primary" @click="handleProcess('add')">新增流程</a-button>
        </div>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <custom-table
          ref="table"
          rowKey="id"
          :showAlert="false"
          :showSelection="false"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRow="onSelectedRow"
          @change="onTableChange"
        >
          <!--预警编号-->
          <template slot="statusName" slot-scope="text, record">
            <span v-if="record.status==1" class="text_color_1">{{text}}</span>
            <span v-else-if="record.status==2" class="text_color_2">{{text}}</span>
          </template>
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a-button @click="handleProcess('details', record)" type="link" style="padding:0;">查看</a-button>
            <a-divider v-if="record.status==2" type="vertical" />
            <a-button v-if="record.status==2" @click="handleProcess('edit', record)" type="link" style="padding:0;">编辑</a-button>
            <a-divider v-if="record.status==1" type="vertical"/>
            <a-button v-if="record.status==1"  @click="handleOperate('disable', record)" type="link" style="padding:0;">停用</a-button>
            <a-divider v-if="record.status==2" type="vertical" />
            <a-button v-if="record.status==2" @click="handleOperate('enable', record)" type="link" style="padding:0;">启用</a-button>
            <a-divider v-if="record.status==2" type="vertical" />
            <a-button v-if="record.status==2" @click="handleOperate('delete', record)" type="link" style="padding:0;">删除</a-button>
          </template>
        </custom-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import * as flowServerApi from '@/api/wxSmuggle/flowServer.js'
import { getXzqhList, getDictItemsFromCache } from '@/api/api'
import CustomTable from '@/components/zxd/Table/CustomTable'

export default {
  components: {
    CustomTable,
  },
  data() {
    return {
      moment,
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      rangePickerTime: [],
      show: false,
      closeTip: false,
      loading: false,
      visible: false,
      handleModalBool: false,
      isDisabled: true,
      reloading: false,
      selectKeys: [],
      form: {},
      typeOptions: [
        { text: '全部', value: '', },
        { text: '案事件', value: '1', },
        { text: '情报事件', value: '2', }
      ],
      statusOptions: [
        { text: '全部', value: '', },
        { text: '使用中', value: '1', },
        { text: '停用', value: '2', }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize +
              (index + 1)}` //序号分页后连续
        },
        {
          title: '流程名称',
          dataIndex: 'name',
          width: 100,
          align: 'center',
        },
        {
          title: "业务类型",
          dataIndex: 'typeName',
          width: 80,
          align: 'center'
        },
        {
          title: '生效范围',
          dataIndex: 'rangeName',
          width: 100,
          align: 'center',
        },
        {
          title: '创建日期',
          dataIndex: 'createTime',
          width: 100,
          align: 'center'
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          width: 100,
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'statusName',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'statusName' },
        },
        {
          title: '操作',
          width: 180,
          align: 'center',
          dataIndex: 'action',
          // slots: { title: 'customIsAction' },
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {}
    }
  },
  created() {},
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.rangePickerTime = []
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true;
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = {currentPage: 'pageNo'}
      let paginations= Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations);
      this.refreshTable();
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      flowServerApi.getProcessList(form).then((res) => {
        if (res.success) {
          this.pageData = res.result
          this.loading = false
        } else {
          this.loading = false
        }
      }).catch(e=>{
        this.loading = false
        this.$message.warn("请求失败！");
      })
    },
    // 弹窗成功接收
    modalFormOk(type) {
      this.refreshTable()
    },
    // 新增流程、编辑流程、查看流程
    handleProcess(type, record) {
      let path
      if(type==='add') {
        path = '/process/add'
      } else if(type==='edit') {
        path = `/process/edit/${record.id}`
      } else if(type==='details') {
        path = `/process/details/${record.id}`
      } 
      this.$router.push({
        path: path
      });
    },
    handleOperate(type, record) {
      let that = this
      let title, api, form = {}
      if (type=='enable') {
        title = '确定启用该流程？'
        form = { id: record.id, status: 1 }
      } else if(type=='disable') {
        title = '确定停用该流程？'
        form = { id: record.id, status: 2 }
      } else if(type=='delete') {
        title = '确定删除该流程？'
      }
      this.$confirm({
        title: title,
        onOk() {
          if (type=='enable') {
            api = flowServerApi.operateProcess(form)
          } else if(type=='disable') {
            api = flowServerApi.operateProcess(form)
          } else if(type=='delete') {
            api = flowServerApi.deleteProcess(record.id)
          }
          api.then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.onQuery()
            } else {
              that.$message.warn(res.message)
            }
          }).catch(e=>{
            that.$message.warn("操作失败！")
          })
        }
      })
    },
    // 生效范围
    getSelectRows(rows) {
      if(rows && rows.length>0) {
        let rangeNames = rows.map(v => v.title).join(',')
        this.$set(this.form, 'rangeName', rangeNames)
      } else {
        this.$set(this.form, 'rangeName', '')
      }
    },
    // 创建日期
    rangePickerChange(date) {
      this.$set( this.form, 'startTime', date[0] )
      this.$set( this.form, 'endTime', date[1] )
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    }
  }
}
</script>
<style lang="less" scoped>
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;
  > div {
    flex: 0 0 25%;
  }
  & > * {
    width: 100%;
    margin-bottom: 0;
    padding: 5px 0;
  }
  &.mode_item_none {
    > div {
      flex: inherit;
    }
  }
  .zdy-form-item-label {
    /deep/.ant-form-item-label {
      width: 70px;
    }
    &.xzqh-form-item-label{
      /deep/.ant-form-item-control-wrapper {
        .ant-form-item-children {
          display: -webkit-box;
        }
      }
    }
  }
}
/deep/.table-operator {
  display: flex;
  justify-content: space-between;
}
.table-page-content {
  /deep/.ant-table-thead > tr > th,
  /deep/.ant-table-tbody > tr > td {
    padding-left: 0;
    padding-right: 0;
  }
  /deep/.ant-table-thead > tr:first-child > th:first-child,
  /deep/.ant-table-tbody > tr > td:first-child
  {
    padding-left: 10px;
  }
  .text_color_1 {
    color: #70B603;
  }
  .text_color_2 {
    color: #d9001b;
  }
}
</style>
